<template>
    <div id="orderList">
        <orderTittle #tittle="">
            <template>订单列表</template>
        </orderTittle>
        <div>
            <el-table
                    :data="showOrderData"
                    border
                    style="width: 100%; margin: auto">
                <el-table-column
                        prop="id"
                        label="订单id">
                </el-table-column>
                <el-table-column
                        prop="channel"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="收货人姓名">
                </el-table-column>
                <el-table-column
                        prop="user_call"
                        label="收货人手机">
                </el-table-column>
                <el-table-column
                        prop="delivery"
                        label="寄送类型">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="订单状态">
                </el-table-column>
                <el-table-column
                        prop="delivery_id"
                        label="快递单号">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination hide-on-single-page
                           layout="prev, pager, next"
                           :total="DataNum"
                           :page-size="5"
                           :pager-count="5"
                           @current-change="pageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import orderTittle from "./orderTittle"
    import {mapActions} from 'vuex'

    export default {
        name: "orderList",
        components:{
            orderTittle,
        },
        data(){
            return{
                allOrder:[],
                nowPage:1,
            }
        },
        computed:{
            showOrderData(){
                let showData = [];
                showData = this.allOrder.slice((this.nowPage-1)*5,this.nowPage*5);
                return showData;
            },
            DataNum(){
                return this.allOrder.length;
            }
        },
        methods:{
            ...mapActions(['getOrderList','getOneOrder']),
            pageChange(clickPage){  //页码改变
                this.nowPage = clickPage;
            },
            handleEdit(index, row){   //查看详情
                this.getOneOrder(row.id);
                this.$router.push('/index/oneOrderPage');   //跳转至订单详情页
            },
        },
        created() {
            this.getOrderList().then(res=>{
                if (res.code===200){
                    this.allOrder = res.orderData;
                }else{
                    alert('400-未拿到订单数据');
                }
            })
        }
    }
</script>

<style scoped>
#orderList{
    padding: 10px 15px 20px;
    margin-top: 10px;
    background-color: #ffffff;
}
</style>